/**
 * 
 * 一个上传组件加预览组件
 * 利用了filerader
 * 
 */

import React, {Component} from 'react';


import './index.less';

import getLanguage from '../../language';

import {getColor} from '../../../../hrpub/common/utils/utils';

const language = {};
class Uploader extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            imageData: props.value,
            disableUpload: false,
            language: {},
            color: '',
            bgColor: '#f2f2f2'
        };
        
        this.uploadHandle = this.uploadHandle.bind(this);
    }

    componentDidMount() {
        setTimeout(() => {
            this.props.MultiInit.getMultiLang({
                moduleId: 'p6007',
                domainName: 'hrhi',
                callback: (json, status, inlt) => {
                    this.setState({
                        language: json
                    });
                    Object.assign(language, json);
                }
            });
        }, 0);

        let c = getColor();
        this.setState({
            color: c.color,
            bgColor: c.bgColor
        });
    }
    
    uploadHandle(e) {
        let file = this.input.files[0];
        
        if(FileReader && file) {
            let reader = new FileReader();
            
            reader.onload = (e) => {
                let res = this.props.onUpload && this.props.onUpload(e.target.result, file);
                if(res !== false) {
                    this.setState({
                        imageData: e.target.result
                    });
                }
            };
            reader.readAsDataURL(file);
        }
    }
    
    
    render() {
        const {
            imageData,
            language,
            color,
            bgColor
        } = this.state;
        
        let {
            disableUpload,
            label
        } = this.props;

        if(!('disableUpload' in this.props)) {
            disableUpload = this.state.disableUpload;
        }

        return (
            <div
                className="uploader-photo-wrapper"
                style={{
                    backgroundColor: bgColor,
                    color: color
                }}
            >
                <div 
                    className="uploader-photo-bg-word"
                    style={{
                        backgroundColor: bgColor
                    }}
                >
                    {label || language['hi6007-000039']/** 照片 */}
                </div>}
                <input
                    type="file"
                    className="photo-upload"
                    ref={ref => this.input = ref}
                    onChange={this.uploadHandle}
                    style={{
                        backgroundColor: bgColor
                    }}
                    disabled={disableUpload}
                />
                <img
                    src={imageData}
                    className="photo-show-box"
                    style={{
                        zIndex: disableUpload ? 3 : 1
                    }}
                />
            </div>
        );
    }
}

export default Uploader;
